<template>
  <view class="container">
    <view class="directory-title">目录</view>
    <view
      class="item"
      v-for="(item, index) in details"
      :key="index"
      @click="tabClick(item.link)"
    >
      <text>{{ index + 1 }}</text>
      <text class="sub-title">{{ item.chapterName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "course-detail-list",
  props: {
    details: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    tabClick(link = "") {
      uni.navigateTo({
        url: `/pages/webPage/webPage?url=${encodeURIComponent(link)}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 32rpx;
  .item {
    font-size: 30rpx;
    font-weight: 500;
    padding: 12rpx;

    border-bottom: 1px solid green;
    .sub-title {
      margin-left: 16rpx;
    }
  }
  .directory-title {
    text-align: center;
    font-size: 32rpx;
    margin-bottom: 16rpx;
  }
}
</style>
